import React, { Component, Fragment } from "react";
// 引入头部文件
import Header from "./common/Header";
// 导入底部文件
import Footer from "./common/Footer";
// 导入内容文件
import Content from "./pages/Content";
// 导入路由文件
import { BrowserRouter, Routes, Route } from "react-router-dom";
// 导入详情文件
import Details from "./pages/Details";
// 导入登录文件
import Login from "./pages/Login";
import Writer from "./pages/Writer";
class App extends Component {
  render() {
    return (
      <Fragment>
        {/* 路由 */}
        <BrowserRouter>
          {/* header 组件 */}
          <Header></Header>
          {/* 路由规则 */}
          <Routes>
            {/* content 组件 */}
            <Route path="/" element={<Content></Content>}></Route>
            {/* details 详情页 */}
            <Route path="/details/:id" element={<Details></Details>}></Route>
            {/* 登录页 */}
            <Route path='/login' element={<Login></Login>} ></Route>
            {/* 写文章页 */}
            <Route path='/writer' element={<Writer></Writer>} ></Route>
          </Routes>
          {/* footer 组件 */}
          <Footer></Footer>
        </BrowserRouter>
      </Fragment>
    )
  }
}

export default App;
